<template>
    <div>
        <MHeader>首页</MHeader>
        <div class="content">
          <div v-if="loading">
            <Loading></Loading>
          </div>
          <template v-else>
            <Swiper :swiperSliders="sliders"></Swiper>
            <div class="container">
              <h3>热门图书</h3>
              <ul>
                <li v-for="(hot, index) in hotBooks" :key="index">
                  <img :src="hot.bookCover" :alt="hot.bookName">
                  <b>{{hot.bookName}}</b>
                </li>
              </ul>
            </div>
          </template>
        </div>
    </div>
</template>
<script>
// 1.引用组件 2.注册组件 3.使用组件
import MHeader from '@/base/MHeader'
import Loading from '@/base/Loading'
import Swiper from '@/base/Swiper'
import {getAll} from '@/api'
export default {
  created () {
    this.getData()
  },
  data () {
    return {
      sliders: [],
      hotBooks: [],
      loading: true
    }
  },
  methods: {
    async getData () {
      let [sliders, hotBooks] = await getAll()
      this.sliders = sliders
      this.hotBooks = hotBooks
      // 轮播图和热门图书已经获取完成
      this.loading = false
    }
  },
  components: {
    MHeader, Swiper, Loading
  }
}
</script>
<style scoped lang="less">
h3{color: #999; padding: 5px 0;}
.container{
  width: 90%;
  margin: 0 auto;
  ul {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 0;
    li {
      width: 50%;
      text-align: center;
      margin: 5px 0;
      img{width: 100%}
    }
  }
}
</style>
